<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="/examples/public/favicon.ico" >
  <link rel="stylesheet" href="../css/common.css">
  <title>Vue3-support</title>
</head>

<style>
  #app {
    width: 100%;
    height: 100%;
  }

  .operate-box {
    position: fixed;
    color: rgb(255, 255, 255);
    top: 20%;
    left: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .loadingDom {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 36px;
    z-index: 10;
  }

  button {
    padding: 10px;
    background:rgb(126, 255, 255);
    color: rgb(0, 0, 0);
    border: 0;
    border-radius: 5px;
    box-shadow: 2px 2px 6px rgb(53, 170, 160);
    cursor: pointer;
  }
</style>

<body>
  <div id="app"></div>

  <script type="module">
    import * as Vue from '/examples/public/plugins/vue.esm-browser.prod.js'
    import { v4 as getUUid} from 'uuid'
    import * as Vis from '../../dist/Vis.es.js' 
    import * as THREE from 'three'

    import configList from '/examples/public/assetsConfig/vue3Support.json'


    Vue.createApp({
      template: `
      <div
        class="operate-box"
        v-for="(item, index) in configMap"
        :key="index">
        <h1  v-text="item.position.y"></h1>
        <button @click="addPositionY(item)">light position y add 5</button>
      </div>
      `,
      setup () {

        const loadingDom = document.createElement('div')
        loadingDom.innerText = '正在加载...'
        loadingDom.className = 'loadingDom'
        document.body.appendChild(loadingDom)

        const engine = new Vis.ModelingEngineSupport()
        .setDom(document.getElementById('app'))
        .setSize()
        .play()
        engine.loadConfigAsync(configList).then(res => {
          document.body.removeChild(loadingDom)
        })

        const addPositionY = function(item)  {
          item.position.y += 5
        }

        const lightDataSupport = engine.dataSupportManager.lightDataSupport
        const lightData = lightDataSupport.getData()

        const configMap = Vue.reactive(lightData)

        lightDataSupport.setData(configMap)

        return {
          configMap,
          addPositionY
        }
      }
    }).mount('#app')
  </script>
</body>
</html>